<template>
  <div class="base-file-details">
    <el-descriptions :column="1" border>
      <el-descriptions-item label="文件名">{{ fileInfo?.name }}</el-descriptions-item>
      <el-descriptions-item label="原始文件名">{{ fileInfo?.original_name }}</el-descriptions-item>
      <el-descriptions-item label="路径">{{ fileInfo?.path }}</el-descriptions-item>
      <el-descriptions-item label="大小">{{ fileInfo?.size_format }}</el-descriptions-item>
      <el-descriptions-item label="类型">{{ fileInfo?.type }}</el-descriptions-item>
      <el-descriptions-item label="MIME类型">{{ fileInfo?.mime_type }}</el-descriptions-item>
      <el-descriptions-item label="扩展名">{{ fileInfo?.extension }}</el-descriptions-item>
      <el-descriptions-item label="创建时间">{{ fileInfo?.created_time }}</el-descriptions-item>
      <el-descriptions-item label="更新时间">{{ fileInfo?.updated_time }}</el-descriptions-item>
      <el-descriptions-item label="存储类型">{{ fileInfo?.storage_class }}</el-descriptions-item>
      <el-descriptions-item label="ETag">{{ fileInfo?.etag }}</el-descriptions-item>
      <el-descriptions-item label="Hash">{{ fileInfo?.hash }}</el-descriptions-item>
      <el-descriptions-item label="上传IP">{{ fileInfo?.upload_ip }}</el-descriptions-item>
      <el-descriptions-item label="上传者" v-if="fileInfo?.uploader?.name">
        {{ fileInfo?.uploader?.name }}
      </el-descriptions-item>
      <el-descriptions-item label="模块" v-if="fileInfo?.module">
        {{ fileInfo?.module }}
      </el-descriptions-item>
      <el-descriptions-item label="用途" v-if="fileInfo?.purpose">
        {{ fileInfo?.purpose }}
      </el-descriptions-item>
      <el-descriptions-item label="标签" v-if="fileInfo?.tags?.length">
        <el-tag v-for="tag in fileInfo.tags" :key="tag" size="small" style="margin-right: 4px">
          {{ tag }}
        </el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="备注" v-if="fileInfo?.remark">
        {{ fileInfo?.remark }}
      </el-descriptions-item>
    </el-descriptions>
  </div>
</template>

<script setup lang="ts">
import type { FileInfo } from '../../types'

defineProps<{
  fileInfo: FileInfo | null
}>()
</script>

<style scoped lang="scss">
:deep(.el-descriptions__body) {
  background-color: #fff;
}

:deep(.el-descriptions__cell) {
  &.el-descriptions__label {
    width: 120px;
    min-width: 120px;
    max-width: 120px;
  }
}
</style> 